<template>

    <div id="container">

        <div style="width:85%;float: left">
            <s-h1>{{ blog.title }}</s-h1>
            <div class="vditor-reset" id="vditor" ref="wrapper">
            </div>
        </div>

        <div style="float: left;width: 15%">
            <n-affix
                    :trigger-top="36"


            >
                <div ref="outline" style="display: flex;"></div>
            </n-affix>
        </div>

    </div>
</template>
<style scoped>
#container {
    padding: 3rem;
}
</style>
<script setup lang="ts">
import {useLogger} from "../../utils/logger";
import Vditor from "vditor";
import 'vditor/dist/index.css'
import '../../assets/css/shu.css'
import {onMounted, ref} from "vue";
import {get} from "../../utils/requests";
import {Url} from "../../utils/urls";
import {NAffix} from "naive-ui";
import SH1 from "../../components/SH1.vue";

const props = withDefaults(defineProps<{ blogId: bigint }>(), {})
const wrapper = ref<HTMLDivElement>()
const outline = ref<HTMLDivElement>()

interface Blog {
    title: string,
    author: {
        id: bigint,
        name: string
    },
    content: string,
    id: bigint
    time_info: { created_date_time: string, last_modified_date: string }
}

const logger = useLogger()
const blog = ref<Blog>()
onMounted(() => {
    load(props.blogId)
})

function load(id: bigint) {
    logger.debug("博客id为：", id)
    get(`${Url.Blogs}/${id}`).then(data => {
        blog.value = data
        Vditor.preview(wrapper.value!, blog.value?.content!, {
            mode: 'light', after() {
                Vditor.outlineRender(wrapper.value!, outline.value!)
            },
            theme: {
                current: 'shu'
            }
        })

    })
}
</script>

